import React, { Component } from "react";
import { NavBar, WingBlank, Flex, Toast } from "antd-mobile";
import { withRouter } from "react-router-dom";
import { withFormik, Form, Field } from "formik";
import { post } from "../../../../utils/Axios";
import * as Yup from "yup";
import "./index.scss";

const CHECK_USERNAME = /^[a-zA-Z_\d]{5,8}$/;
const CHECK_PASSWORD = /^[a-zA-Z_\d]{5,12}$/;

const MyForm = (props) => {
  // const { values, touched, errors, handleChange, handleBlur, handleSubmit } =
  const { touched, errors } = props;

  return (
    <Form>
      <Field
        type="text"
        className="username"
        placeholder="请输入账号"
        name="username"
      />
      <div
        style={{ width: "100%", height: "1px", backgroundColor: "#dfdbdf" }}
      ></div>
      <Field
        type="password"
        className="password"
        placeholder="请输入密码"
        name="password"
      />
      <div
        style={{ width: "100%", height: "1px", backgroundColor: "#dfdbdf" }}
      ></div>
      <Field
        type="text"
        className="repeatpassword"
        placeholder="请再次确认密码"
        name="repeatpassword"
      />
      <div
        style={{ width: "100%", height: "1px", backgroundColor: "#dfdbdf" }}
      ></div>
      {errors.username && touched.username && Toast.info(errors.username, 1)}
      {errors.password && touched.password && Toast.info(errors.password, 1)}
      {errors.repeatpassword &&
        touched.repeatpassword &&
        Toast.info(errors.repeatpassword, 1)}
      {touched.password &&
        touched.repeatpassword &&
        errors.repeat &&
        Toast.info(errors.repeat, 1)}
      <button type="submit" className="buttonItem">
        <span>注册</span>
      </button>
    </Form>
  );
};

const MyEnhancedForm = withFormik({
  mapPropsToValues: () => ({ username: "", password: "", repeatpassword: "" }),

  validate: (values) => {
    const errors = {};

    if (values.username !== values.repeatpassword) {
      errors.repeat = "请确认两次输入的密码是否一致";
    }

    return errors;
  },

  validationSchema: Yup.object().shape({
    username: Yup.string()
      .required("请输入账号~")
      .matches(
        CHECK_USERNAME,
        "账号长度为5到8位，只能出现数字、字母和下划线呢"
      ),
    password: Yup.string()
      .required("请输入密码~")
      .matches(
        CHECK_PASSWORD,
        "密码长度为5到12位，只能出现数字、字母和下划线呢"
      ),
    repeatpassword: Yup.string().required("请输入确认密码"),
    // .equals(this.password, "嘿嘿"),
  }),

  handleSubmit: async (values, { props }) => {
    alert(JSON.stringify(values, null, 2));
    const data = await post("/user/registered", {
      username: values.username,
      password: values.password,
    });
    if (data.status === 200) {
      localStorage.setItem("xyzf_user_token", data.body.toke);
      Toast.success("注册成功~", 1);
      setTimeout(() => {
        props.props.history.go(-1);
      }, 1000);
    } else if (data.status === 400) {
      Toast.info("亲~用户名已经存在了");
    } else {
      Toast.info("亲，再换个姿势试一试呢");
    }
  },

  displayName: "BasicForm",
})(MyForm);

class Register extends Component {
  render() {
    return (
      <div className="registerWrapper">
        <NavBar
          mode="dark"
          icon={
            <span
              className="iconfont icon-cuohao"
              onClick={() => {
                this.props.history.go(-1);
              }}
            ></span>
          }
        ></NavBar>
        <WingBlank>
          <div className="title">
            <div className="big">欢迎加入🎉</div>
            <div className="small">这里有每个人最美好的初衷</div>
          </div>
          <div className="formWrapper">
            <MyEnhancedForm props={this.props}></MyEnhancedForm>
          </div>
          <Flex justify="between">
            <div
              className="register"
              onClick={() => {
                this.props.changLoginOrRegister(true);
              }}
            >
              已有账户，前往登录
            </div>
            <div className="forgetPassword">忘记密码</div>
          </Flex>
        </WingBlank>
      </div>
    );
  }
}

export default withRouter(Register);
